import React, { useEffect, useState } from 'react';
import '../../styles/liu/servePending.scss'
import { Button, Form, Input, Select, DatePicker, Table, Col } from 'antd';
import { NavLink ,useNavigate} from 'react-router-dom'
import { getServerList} from '../../api/liu/index'
import Header from '../../components/liu/header'
interface Props {

}
function ServePending(props: Props) {
    const navigate = useNavigate()
    const { Option } = Select;
    const { RangePicker } = DatePicker;
    const { Search } = Input;
    const [data, setData] = useState([])
    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
    var [pagination, setPagination] = useState({ current: 1, pageSize: 8, total: 100 });
    //初始化加载
    useEffect(() => {
        getServerList().then((res:any)=>{
            var newarr = res.data.filter((item:any)=>{return item.signPending==="待审核"||item.signPending==="已驳回"||item.signPending==="待服务"})
            console.log(newarr);
            
            setData(newarr)
        })
    }, [])
    //表单验证通过提交
    const onFinish = async (values: any) => {

    };
    //点击搜索
    const onSearch = (value: string) => {
        getServerList().then((res: any) => {
            var arr = res.data.filter((item:any)=>{
                return item.name.indexOf(value)!=-1
            })
            setData(arr)
        })
    };
    //表格列数据
    const columns: any = [
        { title: '编号', dataIndex: 'id', },
        { title: '姓名', dataIndex: 'name', },
        { title: '身份证号', dataIndex: 'id-num', },
        { title: '手机号码', dataIndex: 'phone', },
        { 
            title: '服务状态', 
            dataIndex: 'signPending',
            render:(signPending:any)=>{
                return <span style={{color:signPending==="待审核"?"#3DD4A7":""||signPending==="已驳回"?"#FA746B":""||signPending==="待服务"?"#FDDB78":""}}>{signPending}</span>
            }
         },
        { title: '服务包', dataIndex: 'server', },
        { title: '服务项目', dataIndex: 'serverTypes', },
        { title: '申请时间', dataIndex: 'orderTime', },
        {
            title: '操作',
            render: (id: any) => {
                return (<>
                    <NavLink to="/index/serve-detail" state={id}>查看详情</NavLink>
                    <NavLink to="/index/serve-edit" state={id}>编辑</NavLink>
                </>)
            }
        },
    ];
    const onSelectChange = (newSelectedRowKeys: any) => {
        console.log('selectedRowKeys changed: ', newSelectedRowKeys);
        setSelectedRowKeys(newSelectedRowKeys);
    };
    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
    };

    //分页发生改变后执行,pagi是最新的页码数据,是个对象 current:1,pageSize:5,total:100 },拿到最新的对象再去发请求
    const handleChange = (pagi: any) => {
        setPagination(pagi) //更新页码
    }
    return (
        <div className='servePending'>
            <div className="main">
                <Header txt="待处理服务"></Header>
                <Form
                    name="basic"
                    layout="inline"
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 18 }}
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                >

                    <Col span={6}>
                        <Form.Item
                            label="服务状态"
                            name="state"
                        >
                            <Select
                                defaultValue={"请选择"}
                                allowClear
                            >
                                <Option value="">请选择</Option>
                                <Option value="待审核">待审核</Option>
                                <Option value="待服务">待服务</Option>
                                <Option value="已驳回">已驳回</Option>
                            </Select>
                        </Form.Item>
                    </Col>

                    <Col span={6}>
                        <Form.Item
                            label="签约机构"
                            name="organization"
                        >
                            <Select
                                defaultValue={"请选择"}
                                allowClear
                            >
                                <Option value="">请选择</Option>
                                <Option value="罗西社区服务中心">罗西社区服务中心</Option>
                                <Option value="天明社区服务中心">天明社区服务中心</Option>
                                <Option value="民进社区服务中心">民进社区服务中心</Option>
                            </Select>
                        </Form.Item>
                    </Col>

                    <Col span={6}>
                        <Form.Item
                            label="医生团队"
                            name="doctor"
                        >
                            <Select
                                defaultValue={"请选择"}
                                allowClear
                            >
                                <Option value="">请选择</Option>
                                <Option value="王皓团队">王皓团队</Option>
                                <Option value="胡曼团队">胡曼团队</Option>
                                <Option value="李维团队">李维团队</Option>
                            </Select>
                        </Form.Item>
                    </Col>

                    <Col span={4}>
                        <Form.Item>
                            <Button  type="primary" onClick={()=>{navigate("/index/serve-add")}}>新增服务</Button>
                            <Button>导出</Button>
                        </Form.Item>
                    </Col>

                    <Col span={6}>
                        <Form.Item
                            label="服务包"
                            name="server"
                        >
                            <Select
                                defaultValue={"请选择"}
                                allowClear
                            >
                                <Option value="">请选择</Option>
                                <Option value="0-6岁儿童服务包">0-6岁儿童服务包</Option>
                                <Option value="老年人服务包">老年人服务包</Option>
                                <Option value="慢性病护理包">慢性病护理包</Option>
                            </Select>
                        </Form.Item>
                    </Col>

                    <Col span={10}>
                        <Form.Item
                            label="预约日期"
                            name="date"
                            className='date'
                        >
                            <RangePicker placeholder={["开始日期", "结束日期"]} />
                        </Form.Item>
                    </Col>

                    <Col span={6}>
                        <Search placeholder="请输入关键字" onSearch={onSearch} enterButton />
                    </Col>
                </Form>

                <div className="table">
                    <Table columns={columns} size="small" dataSource={data} rowSelection={rowSelection} pagination={pagination} onChange={(pagi) => { handleChange(pagi) }} />
                </div>
            </div>

        </div>
    );
}

export default ServePending;